.component-price-detail {
  background: #000000aa;
  padding: 0 20rpx;
  position: absolute;
  left: -292rpx;
  top: 0;
  transform: translateY(calc(-100% - 20rpx));
  width: 370rpx;
  border-radius: 20rpx;
  color: #fff;
  box-sizing: border-box;
  z-index: 1;
  display: none;
  .price-row {
    display: flex;
    align-items: center;
    padding: 12rpx;
    height: 70rpx;
    border-bottom: 1rpx solid #999;
    font-size: 24rpx;
    box-sizing: border-box;
    .price-row-label {
      margin-right: 8rpx;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  &::after {
    content: "";
    position: absolute;
    bottom: -15rpx;
    right: 40rpx;
    width: 0;
    height: 0;
    border-top: 15rpx solid #000000aa;
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid transparent;
  }
}
.component-price-detail-show {
  display: block;
  animation: 0.5s showPriceDetail;
}
@keyframes showPriceDetail {
  0% {
    opacity: 0;
    display: block;
  }
  99% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.component-price-detail-hide {
  animation: 0.5s hidePriceDetail;
  animation-fill-mode: forwards;
}
@keyframes hidePriceDetail {
  0% {
    opacity: 1;
    display: block;
  }
  99% {
    opacity: 0;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
